<template>
  <a-card :bordered="false">
    <record-form :btnControl="disabledBtn" class="mb10" @search="handleSearch">
      <a-button slot="btn" icon="delete" :disabled="disabledBtn" @click="handleDelete(chosedRow)" type="danger">删除</a-button>
    </record-form>
    <record-table ref="recordTable" @delete="handleDelete" @edit="handleEdit" @selectChange="handleSelectChange"/>
  </a-card>
</template>

<script>
import RecordForm from './recordForm.vue'
import RecordTable from './recordTable.vue'

export default {
  name: 'RecordIndex',
  components: {
    RecordForm,
    RecordTable
  },
  data () {
    return {
      disabledBtn: true,
      chosedRow: {}
    }
  },
  methods: {
    handleDelete (record) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: '您确定删除这条记录吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        onOk () {
          _this.$message.success('删除成功')
        },
        onCancel () {}
      })
    },
    handleEdit (record) {
      console.log('record', record)
    },
    handleSearch (queryParam) {
      this.$refs.recordTable.handleQuery(queryParam)
    },
    handleSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRows', selectedRows)
      if (selectedRows.length > 0) {
        this.disabledBtn = false
        this.chosedRow = selectedRows
      } else {
        this.disabledBtn = true
        this.chosedRow = {}
      }
    }
  },
  created () {
    console.log('router', this.$route)
  }
}
</script>

<style>
</style>
